<template>
  <div>
    <swiper>
      <swiper-item v-for="(item, index) in items" :key="index + 'a'" :name="item.name">
        {{item.name}}
      </swiper-item>
    </swiper>
  </div>
</template>

<script>

  import Swiper from './components/swiper'
  import SwiperItem from './components/swiper-item'

  export default {
    name: 'App',
    data(){
      return {
        items: [{
          name: '推荐'
        },{
          name: '手机'
        },{
          name: '智能'
        },{
          name: '超长的标题'
        },{
          name: '电脑'
        },{
          name: '双摄'
        },{
          name: '全面屏'
        },{
          name: '生活周边'
        }]
      }
    },
    components: {
      SwiperItem,
      Swiper

    },
    mounted() {
      setTimeout(() => {
        this.items.push({name: '盒子'})
      }, 3000)
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .swiper-item--wrapper:nth-child(4){
    background: #ace;
  }
    .swiper-item--wrapper:nth-child(1){
    background: #6de;
  }
    .swiper-item--wrapper:nth-child(2){
    background: #bae;
  }
    .swiper-item--wrapper:nth-child(3){
    background: #ea1;
  }
</style>
